@use "../_variables" as *;

.searching{
  border: none;
}

.select-search-content-wrapper {
  min-width: 250px;
  max-width: 300px;
  max-height: min( 480px, calc( var(--radix-dropdown-menu-content-available-height) - 24px ));
  @include list-style;
  @include scrollbar;

  &:has(.select-search-wrapper) {
    padding-top: 0px;
  }

  &.fill{
    width: var(--radix-popper-anchor-width);
    max-width: unset;
  }

  [role="menuitem"][data-highlighted]:hover .item {
    background-color: transparent;
  }

  .select-search-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 21px 16px 13px 16px;
    width: 100%;
    border-bottom: 1px solid var(--stroke-gray-medium);
    position: sticky;
    top: 0;
    background-color: var(--bg-gray-weak);

    .select-search-input {
      border: none;
      height: 100%;
      width: 100%;
      flex: 1;
      background: transparent;
      color: var(--text-strong);
      font-size: 14px;

      &:focus {
        outline: none;
      }
    }

    .select-search-clear {
      width: 20px;
      height: 20px;
      cursor: pointer;
      background: var(--bg-gray-medium);
      border-radius: 50%;
      padding: 2px;

      &:hover {
        background: var(--bg-gray-strong);
      }
    }
  }

  .item{
    padding: 13px 16px!important;
  }

  .no-result {
    padding: 12px 16px 4px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-weak);
  }
}
